<style>
    .ly-map-picker .ly-map-element {
        flex: 1;
        height: 400px;
        border: 1px solid #ebedf0;
    }
</style>
<template>
    <el-form @submit.native.prevent>
        <div class="ly-map-picker" style="display: flex" >
            <div style="width: 360px;margin-right: 10px;" >
                <el-form :label-width="labelWidth" size="small">
                    <el-form-item label="搜索" prop="name" v-if="!disabled">
                        <el-input id="searchInput" v-model="search"  class="map_word"
                                  placeholder="输入关键字搜索位置" :disabled="disabled"></el-input>
                    </el-form-item>
                    <el-form-item label="详细地址" prop="name">
                            <el-input  type="textarea" v-model="value.address" :disabled="disabled" ></el-input>
                    </el-form-item>
                    <el-form-item label="经维度">
                        <div style="display: flex">
                            <el-input style="flex: 1" placeholder="lng" v-model="value.lng"  :disabled="disabled"></el-input>
                            <el-input  style="flex: 1;margin-left: 5px;" placeholder="lat" v-model="value.lat" :disabled="disabled"></el-input>
                        </div>

                    </el-form-item>
                </el-form>
            </div>
            <div style="flex: 1" ref="mapContainer" class="ly-map-element"></div>
        </div>
    </el-form>
</template>
<script>
    Rap.define('', [], {
        name: 'ly-map-picker',
        props: {
            value: {
                type: Object,
                default: function () {
                    return {
                        lat: 1,
                        lng: 1
                    };
                }
            },
            disabled:{
                type:Boolean,
                default:false
            },labelWidth:{
                default:function (){
                    return '100px';
                }
            },
        },
        data: function () {
            return {
                markers:[],
                search:'',
                map: null,
                mapSearcher: null
            }
        },
        watch: {
            value: {
                handler: function (val, oldVal) {
                    this.valueMarker();
                },
                deep: true
            }
        },
        mounted: function () {
            if (this.value) {
                this.setupMap();
            } else {
                this.$emit('input', {});
            }
        },
        methods: {
            setupMap: function () {
                var me = this,
                        geocoder = null,
                        markers = this.markers;
                var map = me.map = new AMap.Map(this.$refs.mapContainer, {
                    zoom: 18
                });
                map.on('click', function (e) {
                    if(me.disabled){
                        return;
                    }
                    map.remove(markers);
                    var location = [e.lnglat.getLng(), e.lnglat.getLat()];
                    me.value.lat = e.lnglat.getLat();
                    me.value.lng = e.lnglat.getLng();
                    var marker = new AMap.Marker({
                        position: location,
                        map: map
                    });
                    markers.push(marker);
                    geocoder.getAddress(location, function (status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            me.value.address = result.regeocode.formattedAddress;
                        }
                    });
                });
                AMap.plugin(['AMap.ToolBar', 'AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
                    map.addControl(new AMap.ToolBar());
                    me.mapSearcher = new AMap.PlaceSearch({
                        map: map,
                    });
                    me.autoComplete = new AMap.Autocomplete({
                        input:'searchInput'
                    });
                    AMap.event.addListener( me.autoComplete, 'select', function(e){
                        if(e.poi.location){
                            var location = e.poi.location;
                            me.value.lat = location.lat;
                            me.value.address =e.poi.district+e.poi.address;
                            me.value.lng =location.lng;
                            map.remove(markers);
                            var marker = new AMap.Marker({
                                position: location,
                                map: map
                            });
                            markers.push(marker);
                        }else{
                            geocoder.getLocation(e.poi.name, function(status, result) {
                                if (status === 'complete' && result.info === 'OK'&&result.geocodes&&result.geocodes.length>0) {
                                    me.value.address = result.geocodes[0].formattedAddress;
                                    me.value.lat=result.geocodes[0].location.lat;
                                    me.value.lng=result.geocodes[0].location.lng;
                                }
                            });
                        }
                    })
                    AMap.service('AMap.Geocoder', function () {
                        geocoder = new AMap.Geocoder();
                    });
                });
                me.valueMarker();
            },valueMarker:function() {
                if(!this.value.lng||!this.value.lng){
                    return;
                }
                this.map.remove(this.markers);
                var currentMark = new AMap.Marker({
                    position: [this.value.lng, this.value.lat],
                    map: this.map
                });
                this.markers.push(currentMark);
                this.map.setCenter([this.value.lng, this.value.lat]);

            }
        }
    })
</script>
